<template>
<div class="bankcard-box">
  <nav-bar title="银行卡管理" fixed="fixed" />
  <div class="bankcard">
    <div class="list gradient-wrap">
      <img class="img" src="/static/images/icb.png" />
      <div class="info">
        <div class="cardName">工商银行卡</div>
        <div class="cardholder">借记卡</div>
        <div class="cardNum">**** **** **** 6688</div>
      </div>
    </div>
    <div class="list gradient-wrap">
       <img class="img" src="/static/images/jh.png" />
       <div class="info">
        <div class="cardName">建行</div>
        <div class="cardholder">借记卡</div>
        <div class="cardNum">**** **** **** 6688</div>
       </div>
    </div>
    <div class="list gradient-wrap">
      <img class="img" src="/static/images/nh.png" />
      <div class="info">
        <div class="cardName">农业银行</div>
        <div class="cardholder">借记卡</div>
        <div class="cardNum">**** **** **** 6688</div>
       </div>
    </div>
  </div>
   <div class="addCard">
    <j-botton type="blue" :disabled="disabled" :loading="isLoading" loadingText='提交中' @click.native="Login">+添加银行卡</j-botton>
  </div>
</div>
</template>
<script>
import * as Grade from '@/plugins/grade';
export default {
  name: 'bankcard',
  data() {
    return {
      disabled: false,
      isLoading: false
    };
  },
  created() {
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener('load', function() {
        Grade(document.querySelectorAll('.gradient-wrap'));
      });
    });
  },
  methods: {
    Login() {

    }
  }
};
</script>
<style lang="less" scoped>
.bankcard-box{
  .addCard{
    color: #FFF;
    font-size: 32px;
    text-align: center;
    position: fixed;
    bottom:0;
    left:-10px;
    right: -10px;
  }
  .bankcard{
   .list{
     margin: 24px;
     border-radius: 20px;
     padding: 37px 22px;
     color: #fff;
     display: flex;
     .img{
       width: 80px;
       height: 80px;
     }
     .info{
       flex: 1;
       padding-left: 40px;
       color: #fff;
     }
     .cardName{
       font-size: 34px;
     }
     .cardholder{
       font-size:26px;
     }
     .cardNum{
       font-size: 34px;
       padding-top: 10px;
     }
   }
  }
}
</style>
